<template>
  <n-card
    :title="title"
    :size="size"
    :bordered="bordered"
    :hoverable="hoverable"
    :segmented="segmented"
    :loading="loading"
    v-bind="$attrs"
  >
    <template #header-extra>
      <slot name="header-extra" />
    </template>
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </n-card>
</template>

<script setup>
const props = defineProps({
  title: String,
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  bordered: {
    type: Boolean,
    default: true
  },
  hoverable: Boolean,
  segmented: {
    type: [Boolean, Object],
    default: false
  },
  loading: Boolean
})
</script>